<template>
  <div id="app">
    <div style=" width: 70%;padding-top: 20px; border-radius: 10px; margin-top: 10px;">
      <el-card style="width: 100%;margin: 0 auto">
        <el-button style="float: right" type="primary" plain @click="$router.push('/doctor/reply')">返回</el-button>
        <span style="color: #0d6efd">问题详情页</span><br/><br/>
        <span style="color: gray;font-size: 12px">提问人：{{question.user.nickname}}</span>
        <span style="font-size: 10px; color: darkgray;float: right; margin-right: 40px">{{question.time}}</span>
        <p>{{ question.problem }}</p><br/>
        <img :src="question.picture" v-if="question.picture" width="300" height="180" class="head_pic"/><br/>
        <el-button style="float: right;margin-bottom: 10px" size="small" type="success" plain @click="handleRep">回复</el-button>
      </el-card>

      <el-card style="width: 100%;margin: 0 auto">
        <div :title="item.problem" v-for="item in question.replyList" :key="item.id" class="d2">
          <br/>
          <el-button v-if="item.phyId === user.id" plain style="float: right" @click="del(item.id)">删除</el-button>
          <el-avatar shape="circle" :size="30" :src="item.physician.photo"></el-avatar>
          <span style="margin-left: 5px;">{{item.physician.nickname}}</span>
          <span style="font-size: 15px">{{item.physician.identity}}</span>
          <span style="color: gray;font-size: 15px">{{item.physician.hospital.name}}</span><br/>
          <p>{{item.answer}}</p>
          <span style="font-size: 10px; color: darkgray"></span>
          <span style="font-size: 10px; color: darkgray;float: right">{{ item.createtime }}</span>
          <br/>
        </div>
        <div v-if="question.replyList.length === 0">
          <span>暂无回复</span>
        </div>
      </el-card>

<!--      回复-->
      <el-dialog title="回复信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form label-width="80px" size="small">
            <el-input type="textarea" v-model="form.answer" autocomplete="off"></el-input>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="success" @click="save">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  name: "answerQuestion",
  data() {
    return {
      form: {},
      id: 1,
      question: {},
      dialogFormVisible: false,
      phy: {},
      user: localStorage.getItem("phy") ? JSON.parse(localStorage.getItem("phy")) : {},
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      let que = this.$route.query.question
      console.log(que)
      this.request.get("/question/findById?id=" + que.id).then(res => {
        this.question = res
      })
    },
    handleQue(id){
      this.request.get("/physician/findById?id=" + id).then(res => {
        let phy;
        phy = res
        this.$router.push({name: 'PhyInfo', params: {physician: phy}})
      })
    },
    handleRep() {
      this.dialogFormVisible = true
    },
    save(){
      this.form.queId = this.question.id
      this.form.phyId = this.user.id
      this.request.post("/reply/edit", this.form).then(res => {
        if (res) {
          this.$message.success("回复成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("回复失败")
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete("/reply/del?id=" + id).then(res => {
          if (res) {
            this.$message.success("删除成功")
            this.load()
          } else {
            this.$message.error("删除失败")
          }
        })
      });
    },
  }
}
</script>

<style scoped>
#app{
  padding-top: 20px;
  display:flex;
  flex-direction: column;  /* 按照列column(垂直方向)排列*/
  justify-content: center;
  align-items: center;
}
.d2{
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
  width: 90%;
  margin: 0 auto
}
</style>
